<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="static/img/logo.png" type="image/png">
    <link rel="stylesheet" href="static/css/quiz-detail.css">
    <link rel="stylesheet" href="static/css/markdown.css">
    <title>答题详情 - 智慧答题系统</title>
    <!-- KaTeX数学公式支持 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js"></script>
    <!-- Markdown解析库 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@11.1.1/marked.min.js"></script>
</head>
<body>
    <div class="detail-container">
        <!-- 顶部栏 -->
        <div class="detail-header">
            <div class="container">
                <div class="header-content">
                    <h1 class="detail-title">答题详情</h1>
                    <div class="header-actions">
                        <a href="/" class="btn-home">返回首页</a>
                        <a href="/quiz" class="btn-again">再次答题</a>
                    </div>
                </div>
            </div>
        </div>

        <!-- 统计卡片 -->
        <div class="container">
            <div class="stats-cards">
                <div class="stat-card stat-correct">
                    <div class="stat-icon">✓</div>
                    <div class="stat-info">
                        <div class="stat-value" id="totalCorrect">0</div>
                        <div class="stat-label">答对题数</div>
                    </div>
                </div>
                <div class="stat-card stat-wrong">
                    <div class="stat-icon">✗</div>
                    <div class="stat-info">
                        <div class="stat-value" id="totalWrong">0</div>
                        <div class="stat-label">答错题数</div>
                    </div>
                </div>
                <div class="stat-card stat-score">
                    <div class="stat-icon">💯</div>
                    <div class="stat-info">
                        <div class="stat-value" id="totalScore">0</div>
                        <div class="stat-label">总得分</div>
                    </div>
                </div>
                <div class="stat-card stat-time">
                    <div class="stat-icon">⏱</div>
                    <div class="stat-info">
                        <div class="stat-value" id="timeElapsed">00:00</div>
                        <div class="stat-label">用时</div>
                    </div>
                </div>
            </div>

            <!-- 题目列表 -->
            <div class="questions-section">
                <h2 class="section-title">详细答案</h2>
                <div id="questionsList" class="questions-list">
                    <!-- 题目将动态生成 -->
                </div>
            </div>
        </div>
    </div>

    <script src="static/js/quiz-detail.js"></script>
</body>
</html>

